<template>
	<view>
		<view class="head-top">
			<view class="head-top-row">
				<view class="head-top-row-left">
					<view class="head-top-row-left-text">
						沈阳富创MES
					</view>
				</view>
				<view class="head-top-row-right" @click="handleLogout">
					退出
				</view>
			</view>
		</view>
		<view class="example-body" v-show="currentIndex!=0">
			<uni-datetime-picker v-model="dateRange" type="daterange" @change="maskClick" />
		</view>
		<scroll-view :scroll-top="scrollTop" :scroll-y="true"
			:class="{'scroll-Y2': currentIndex==0, 'scroll-Y1': currentIndex != 0}">
			<view :class="{'Task-list2': currentIndex==0, 'Task-list1': currentIndex != 0}"
				v-for="(item,index) in Taskllist ">
				<view class="Task-list-row">
					<view class="Task-list-row-left">
						现场标号:{{item.on_site_labeling}}
					</view>
					<view class="Task-list-row-right">
						车间:{{item.workshop}}
					</view>
				</view>
				<view class="Task-list-row1">
					<view class="Task-list-row1-left">
						设备名称:{{item.mato_NAME}}
					</view>
				</view>
				<view class="Task-list-row1">
					<view class="Task-list-row1-left">
						故障类型:{{item.process_TYPE_NAME1}} {{item.process_TYPE_NAME2}}
					</view>
				</view>
				<view class="Task-list-row2">
					<view class="Task-list-row2-left">
						故障描述:
					</view>
					<view class="Task-list-row2-right">
						<scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 40px;">
							<text>{{item.fault_Description}}</text>
						</scroll-view>
					</view>
				</view>
				<view class="Task-list-row3">
					<view class="Task-list-row3-left">
						报修人:{{item.repair_applicant}}
					</view>
					<view class="Task-list-row3-right">
						发布时间:{{item.release_time}}
					</view>
				</view>
				<view>
					<view class="Task-list-row4">
						<button v-show="currentIndex==1" class="mini-btn bin-l-r" type="primary" size="mini"
							@click="Task2(item)">取消</button>
						<button v-show="currentIndex==1" class="mini-btn bin-l-r" type="primary" size="mini"
							@click="Task3(item)">关闭</button>
						<button v-show="currentIndex==0" class="mini-btn bin-l-r" type="primary" size="mini"
							@click="Task1(item)">接收</button>
					</view>
					<view class="Task-list-row3" v-show="currentIndex==2 || currentIndex==3">
						<view class="Task-list-row3-left">
							处理人:{{item.processed_by}}
						</view>
						<view class="Task-list-row3-right">
							处理时间:{{item.processing_time}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="tab-main">
			<view class="tabs" :class="{ spaceCenter: tabList.length === 1 }">
				<view class="tab-item" :class="{ active: currentIndex === index }" v-for="(item, index) in tabList"
					:key="index" @click.stop="handleTab(item, index)">
					<view class="text">{{ item.label }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listByParamTaskUser,
		listByParamTask1,
		listByParamTask2,
	} from '@/api/system/PhoneTask.js'
	export default {
		data() {
			return {
				dateRange: [this.getfirst_day(), this.getlast_day()],
				Taskllist: [],
				scrollTop: 0, // 起始tab
				currentIndex: 0,
				tabList: [{
						label: "所有任务",
						type: "alltask",
						show: true,
					},
					{
						label: "接收任务",
						type: "receivetask",
						show: true,
					},
					{
						label: "已完成",
						type: "historytask",
						show: true,
					},
					{
						label: "全员收任务",
						type: "receivetask",
						show: true,
					},
				]
			}
		},
		created() {
			let data = {
				processType: "2",
			}
			this.currentIndex = 0
			this.SelectionTask(data)

		},
		onShow() {
			if (this.currentIndex != 0) {
				var that = this;
				// 重新获取数据
				let data = {
					processType: "2",
					states: "2",
					first_day: this.dateRange[0],
					last_day: this.dateRange[1],
				};
				that.SelectionTask(data);
				that.currentIndex = 2;
				let data1 = {
					processType: "2",
					states: "1",
					task_code: this.$store.state.user.userAll.userId,
					first_day: this.dateRange[0],
					last_day: this.dateRange[1],
				}
				that.SelectionTask1(data1);
			}

		},
		methods: {
			handleTab(item, index) {
				this.currentIndex = index
				if (index == 0) {
					let data = {
						processType: "2",
					}
					this.SelectionTask(data)
				}
				if (index == 1) {
					let data = {
						processType: "2",
						states: "1",
						task_code: this.$store.state.user.userAll.userId,
						first_day: this.dateRange[0],
						last_day: this.dateRange[1],
					}
					this.SelectionTask(data)
				}
				if (index == 2) {
					let data = {
						processType: "2",
						states: "2",
						first_day: this.dateRange[0],
						last_day: this.dateRange[1],
					}
					this.SelectionTask(data)
				}
				if (index == 3) {
					let data = {
						processType: "2",
						states: "1",
						first_day: this.dateRange[0],
						last_day: this.dateRange[1],
					}
					this.SelectionTask(data)
				}
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			SelectionTask(data) {
				this.Taskllist = [];
				listByParamTaskUser(data).then(res => {
					this.Taskllist = res.data;
					if (this.currentIndex == 0) {
						this.tabList[0].label = "所有任务" + "(" + res.data.length + ")"
					}
					if (this.currentIndex == 1) {
						this.tabList[1].label = "接收任务" + "(" + res.data.length + ")"
					}
					if (this.currentIndex == 2) {
						this.tabList[2].label = "已完成" + "(" + res.data.length + ")"
					}
					if (this.currentIndex == 3) {
						this.tabList[3].label = "全员收任务" + "(" + res.data.length + ")"
					}
					console.log("Task反馈记录", res.data)
				}).catch(error => {
					reject(error)
				})
			},
			SelectionTask1(data) {
				listByParamTaskUser(data).then(res => {
					if (data.states == 0) {
						this.tabList[0].label = "所有任务" + "(" + res.data.length + ")"
					}
					if (data.states == 1) {
						this.tabList[1].label = "接收任务" + "(" + res.data.length + ")"
					}
					if (data.states == 2) {
						this.tabList[2].label = "已完成" + "(" + res.data.length + ")"
					}
					if (this.currentIndex == 3) {
						this.tabList[3].label = "全员收任务" + "(" + res.data.length + ")"
					}
					console.log("Task反馈记录", res.data)
				}).catch(error => {
					reject(error)
				})
			},
			Task1(item) {
				console.log(item.app_id);
				if (item.app_id == 0) {
					var task = {
						mato_NAME: item.mato_NAME,
						task_Id: item.task_Id,
						processed_by: this.$store.state.user.name,
						task_code: this.$store.state.user.userAll.userId,
						states: 1,
						task_SECNE: item.on_site_labeling,
						task_WORK_SHOP: item.workshop,
						task_FAULT: item.process_TYPE_NAME1 + " " + item.process_TYPE_NAME2,
						task_SECNE_FAULT: item.fault_Description,
						UPDATE_TIME: item.release_time,
					}
					this.$modal.loading("接受中，请耐心等待...")
					console.log("Task接收", task)
					listByParamTask1(task).then(res => {
						this.$modal.closeLoading();
						if (res.code == 200) {
							let data = {
								processType: "2",
							}
							this.$modal.msgSuccess("接收成功")
							this.SelectionTask(data)
						}
					}).catch(error => {
						this.$modal.closeLoading();
						reject(error)
					})
				} else {
					this.$modal.loading("接受中，请耐心等待...")
					var data = {
						mato_NAME: item.mato_NAME,
						app_id: item.app_id,
						task_Id: item.task_Id,
						processed_by: this.$store.state.user.name,
						task_code: this.$store.state.user.userAll.userId,
						states: 1,
						task_SECNE: item.on_site_labeling,
						task_WORK_SHOP: item.workshop,
						task_FAULT: item.process_TYPE_NAME1 + " " + item.process_TYPE_NAME2,
						task_SECNE_FAULT: item.fault_Description,
						UPDATE_TIME: item.release_time,
					}
					console.log("Task取消", data)
					listByParamTask2(data).then(res => {
						this.$modal.closeLoading();
						if (res.code == 200) {
							this.$modal.msgSuccess("接收成功")
							let data = {
								processType: "2",
							}
							this.SelectionTask(data)
						}
					}).catch(error => {
						this.$modal.closeLoading();
						reject(error)
					})
				}


			},
			Task2(item) {
				this.$modal.loading("取消中，请耐心等待...")
				var data = {
					app_id: item.app_id,
					task_Id: item.task_Id,
					processed_by: "",
					task_code: "",
					states: 0,
					task_TUI: this.$store.state.user.name,
					task_TUI_ID: this.$store.state.user.userAll.userId,
					task_SECNE: item.on_site_labeling,
					task_WORK_SHOP: item.workshop,
					task_FAULT: item.process_TYPE_NAME1 + " " + item.process_TYPE_NAME2,
					task_SECNE_FAULT: item.fault_Description,
				}
				console.log("Task取消", data)
				listByParamTask2(data).then(res => {
					this.$modal.closeLoading();
					if (res.code == 200) {
						this.$modal.msgSuccess("取消成功")
						let data = {
							processType: "2",
							states: "1",
							task_code: this.$store.state.user.userAll.userId
						}
						this.SelectionTask(data)
					}
				}).catch(error => {
					this.$modal.closeLoading();
					reject(error)
				})
			},
			Task3(item) {
				uni.navigateTo({
					url: '/pages/pda/picture?parme=' + JSON.stringify(item)
				})
			},
			maskClick(e) {
				console.log('选择的时间为：', e[0]);
				let data = {};
				if (this.currentIndex == 1) {
					if (e[0] == undefined) {
						data = {
							processType: "2",
							states: "1",
							task_code: this.$store.state.user.userAll.userId,
						}
					} else {
						data = {
							processType: "2",
							states: "1",
							task_code: this.$store.state.user.userAll.userId,
							first_day: e[0],
							last_day: e[1],
						}
					}

					this.SelectionTask(data)
				}
				if (this.currentIndex == 2) {
					if (e[0] == undefined) {
						data = {
							processType: "2",
							states: "2",
						}
					} else {
						data = {
							processType: "2",
							states: "2",
							first_day: e[0],
							last_day: e[1],
						}
					}

					this.SelectionTask(data)
				}
				if (this.currentIndex == 3) {
					if (e[0] == undefined) {
						data = {
							processType: "2",
							states: "1",
						}
					} else {
						data = {
							processType: "2",
							states: "1",
							first_day: e[0],
							last_day: e[1],
						}
					}
				
					this.SelectionTask(data)
				}
			},
			// 获取当前月第一天
			getfirst_day() {
				const date = new Date();
				// 将当前时间的日期设置成第一天
				date.setDate(1);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				// 月份补 0
				m = m < 10 ? '0' + m : m;
				let d = date.getDate();
				// 日期补 0
				d = d < 10 ? '0' + d : d;
				let first_day = [y, m, d].join('-');
				return first_day
			},
			// 获取当前月最后一天
			getlast_day() {
				const date = new Date();
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				// 月份补 0
				m = m < 10 ? '0' + m : m;
				// new Date(y, m, 0) 获取当前月的最后一天,参数 0 代表上个月的最后一天
				let d = new Date(y, m, 0).getDate();
				// 日期补 0
				d = d < 10 ? '0' + d : d;
				let last_day = [y, m, d].join('-');
				return last_day
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Task-list1 {
		height: 220px;
		margin-bottom: 0.3%;
		background-color: #ffffff;
		border: 1px solid #dcdfe6;
	}

	.Task-list2 {
		height: 220px;
		margin-bottom: 1%;
		background-color: #ffffff;
		border: 1px solid #dcdfe6;
	}

	.scroll-Y1 {
		margin-top: 0.3%;
		height: 76vh;  
	}

	.scroll-Y2 {
		margin-top: 2%;
		height: 81vh;  
	}

	.tab-main {
		position: fixed;
		z-index: -1;
		width: 100%;
		bottom: 0;
		left: 0;
		background: #ffffff;
		box-shadow: 0rpx -1rpx 0rpx 0rpx #ebedf0;

		.tabs {
			display: flex;
			height: 120rpx;

			.tab-item {
				background: #ffffff;
				width: 33.333%;
				display: flex;
				align-items: center;
				flex-direction: column;
				border: 1px solid #dcdfe6;

				.text {
					margin-top: 20px;
					font-size: 13px;
					font-weight: 500;
					color: #5475ff;
					line-height: 24px;
				}
			}

			.tab-item.active {
				.text {
					color: #ffffff;
				}

				background: #5475ff;
			}
		}

		.spaceCenter {
			justify-content: center;
		}
	}

	.head-top {
		background-color: #ffffff;
		height: 9vh;  
	}

	.head-top-row {
		display: flex;
		padding-top: 4vh;
	}

	.head-top-row-left {
		font-size: 19px;
		font-weight: 500;
		width: 86%;
	}

	.head-top-row-left-text {
		padding-left: 40%;
	}

	.head-top-row-right {
		width: 14%;
		font-size: 16px;
		font-weight: 500;
		padding-top: 8rpx;
	}

	.Task-list-row {
		display: flex;
		margin-top: 10rpx;
	}

	.Task-list-row1 {
		display: flex;
		margin-top: 10rpx;
	}

	.Task-list-row2 {
		display: flex;
		margin-top: 10rpx;
	}

	.Task-list-row3 {
		display: flex;
		margin-top: 10rpx;
	}

	.Task-list-row-left {
		width: 65%;
		margin-left: 40rpx;
		font-size: 17px;
		font-weight: 500;
		color: #5475ff;
		line-height: 24px;
	}

	.Task-list-row1-left {
		margin-left: 40rpx;
		font-size: 15px;
		font-weight: 500;
		line-height: 24px;
	}

	.Task-list-row2-left {
		margin-left: 40rpx;
		font-size: 15px;
		font-weight: 500;
		line-height: 24px;
		width: 20%;
	}

	.Task-list-row3-left {
		margin-left: 40rpx;
		font-size: 15px;
		font-weight: 500;
		line-height: 24px;
		width: 40%;
	}

	.Task-list-row-right {
		font-size: 15px;
		width: 30%;
	}

	.Task-list-row3-right {
		font-size: 15px;
		width: 65%;
	}

	.Task-list-row2-right {
		width: 60%;
		border: 1px solid #dcdfe6;
	}

	.Task-list-row4 {
		display: flex;
		float: right;
	}

	.bin-l-r {
		margin-right: 8px;
	}
</style>